<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="UTF-8">
    <META HTTP-EQUIV="pragma" CONTENT="no-cache">
    <META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">
    <META HTTP-EQUIV="expires" CONTENT="0">
    <script type="text/javascript" src="../../js/commonCss.js"></script>
    <script language="JavaScript" type="text/javascript">
        function clearNoNum(obj){
            obj.value = obj.value.replace(/[^\d.]/g,""); //清除"数字"和"."以外的字符
            obj.value = obj.value.replace(/^\./g,""); //验证第一个字符是数字而不是
            obj.value = obj.value.replace(/\.{2,}/g,"."); //只保留第一个. 清除多余的
            obj.value = obj.value.replace(".","$#$").replace(/\./g,"").replace("$#$",".");
            obj.value = obj.value.replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3'); //只能输入两个小数
        }
    </script>
</head>
<body>
<div class="definewidth m20">
    <button type="button" class="btn btn-primary mb20" id="addDialog">新增收款计划</button>
    <div class="newtitle">项目收款信息：</div>
    <table id="table2" class="table table-bordered table-hover definewidth m10"></table>
</div>

<div class="modal fade" tabindex="-1" role="dialog" id="payplan">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">新增收款计划</h4>
            </div>
            <div class="modal-body">
                <form class="form w300 center-block" id="planform">
                    <div class="form-group">
                        <div class="input-group">
                            <div class="input-group-addon">收款类型</div>
                            <select name="paymentType" class="form-control" id="paymentType" >
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="input-group">
                            <div class="input-group-addon">收款时间</div>
                            <input type="text" class="form-control" id="paymentDate" name="paymentDate" placeholder="请输入或点击选择日期">
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="input-group">
                            <div class="input-group-addon">收款金额</div>
                            <input type="text" class="form-control" id="paymentAmount" name="paymentAmount" placeholder="0.00" onkeyup="clearNoNum(this)">
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="input-group">
                            <div class="input-group-addon">备注</div>
                            <input type="text" class="form-control" id="description" name="description" placeholder="请输入备注">
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="addBtn" style="display: none">确定</button>
                <button type="button" class="btn btn-primary" id="editplanBtn" style="display: none;">确定</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<div class="modal fade" tabindex="-1" role="dialog" id="modalDes">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">关闭收款</h4>
            </div>
            <div class="modal-body">
                <form class="form w300 center-block">
                    <div class="form-group">
                        <div class="input-group">
                            <div class="input-group-addon">理由</div>
                            <input type="text" class="form-control" id="description1">
                        </div>
                        <p id="tip" class="p10" style="color: #e90900;display: none">请填写关闭理由</p>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="colseBtn">确定</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<script src="../../js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="../../libs/bootstrap-3.3.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="../../libs/bootstrap-table/bootstrap-table.min.css" />
<script type="text/javascript" src="../../libs/bootstrap-table/bootstrap-table.min.js"></script>
<script type="text/javascript" src="../../libs/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
<link rel="stylesheet" type="text/css" href="../../libs/bootstrap-datepicker/bootstrap-datepicker.min.css" />
<script type="text/javascript" src="../../libs/bootstrap-datepicker/bootstrap-datepicker.min.js"></script>
<script type="text/javascript" src="../../libs/bootstrap-datepicker/locales/bootstrap-datepicker.zh-CN.js"></script>
<link rel="stylesheet" type="text/css" href="../../css/lib.css" />
<link rel="stylesheet" type="text/css" href="../../styles/common.css" />
<script type="text/javascript" src="../../js/common.js"></script>
<script type="text/javascript" src="../../js/validateform.js"></script>
<script type="text/javascript" src="../../js/formatTime.js"></script> <!--格式化时间 $.myTime.UnixToDate(unix)-->
<script type="text/javascript">
    var proid = Number(getQueryString('id'))
    var list = [];
    var formData = {};
    $(function () {
        initTable();
        var Setoption = function(id, param){
            var html = '';
            html +='<option value="">请选择</option>';
            for (var i =0;i<param.length;i++){
                html +='<option value="'+ param[i].paramId +'">'+ param[i].paramName +'</option>';
            }
            $(id).append(html);
        }
        $.ajax({
            type: "POST",
            url: ctx + "/parameter/queryByParameterType",
            data:{
                parameterType: 'payType'
            },
            success: function(data){
                if(data.code == 200){
                    Setoption('#paymentType', data.list)
                }
            }
        });
        $('#paymentDate').datepicker({
            language: 'zh-CN',
            format: 'yyyy-mm-dd',
            autoclose:true
        });
        $("#addDialog").click(function () {
            $('#addBtn').show()
            $('#editplanBtn').hide()
            $("#payplan .modal-title").html('新增收款计划')
            $('#payplan').modal({backdrop: 'static', keyboard: false});
            $("#paymentAmount").val('')
            $("#paymentType").val('')
            $("#paymentDate").val('')
            $("#description").val('')
            $("#addBtn").unbind("click").click(function () {
                if($("#planform").valid()){
                    var formData = {
                        paymentAmount:$("#paymentAmount").val(),
                        paymentType:$("#paymentType").val(),
                        paymentDate:$("#paymentDate").val(),
                        description:$("#description").val(),
                        isValid: true,
                        paymentStatus:17,
                        projectId:proid
                    }
                    $.ajax({
                        type: "POST",
                        url: ctx + "/project/insertPayment",
                        data:JSON.stringify(formData),
                        contentType: "application/json",
                        success: function(data){
                            if(data.code == 200){
                                $('#payplan').modal('hide')
                                $('#table2').bootstrapTable('refresh', {url: ctx + '/project/queryPayment'});
                            } else {
                                alert(data.msg)
                            }
                        }
                    })
                }
            })
        })
        $("#colseBtn").click(function () {
            if($("#description1").val() == '' || null){
                $("#tip").show()
            }else{
                formData.description=$("#description1").val()
                $.ajax({
                    type: "POST",
                    url: ctx + "/project/updatePayment",
                    data:JSON.stringify(formData),
                    contentType: "application/json",
                    success: function(data){
                        if(data.code == 200){
                            $('#modalDes').modal('hide')
                            $('#table2').bootstrapTable('refresh', {url: ctx + '/project/queryPayment'});
                        } else {
                            alert(data.msg)
                        }
                    }
                })
            }
        })
    });
    function  initTable() {
        $('#table2').bootstrapTable({
            url: ctx + '/project/queryPayment', //这个接口需要处理bootstrap table传递的固定参数
            method:'post',
            dataType: "json",
            cache: false,   //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
            contentType:"application/json",   //post请求,content type默认设置为 text/plain,在服务端直接通过 @RequestParam参数映射是获取不到的。
            striped: true,      //是否显示行间隔色
            pagination: true,     //是否显示分页（*）
            sortable: false,      //是否启用排序
            sortOrder: "asc",     //排序方式
            pageNumber:1,      //初始化加载第一页，默认第一页
            pageSize: 10,      //每页的记录行数（*）
            pageList: [10, 25, 50, 100 ],  //可供选择的每页的行数（*）
            queryParamsType:'',  //默认值为 'limit' ,在默认情况下 传给服务端的参数为：offset,limit,sort
            //设置为 ''  在这种情况下传给服务器的参数为：pageSize,pageNumber
            queryParams : queryParams,    //前端调用服务时，会默认传递上边提到的参数，如果需要添加自定义参数，可以自定义一个函数返回请求参数
            sidePagination: "server",   //分页方式：client客户端分页，server服务端分页（*）
            responseHandler:function(res){
                //远程数据加载之前,处理程序响应数据格式,对象包含的参数: 我们可以对返回的数据格式进行处理
                //在ajax后我们可以在这里进行一些事件的处理
                list = res.data.rows
                return res.data;
            },
            onLoadSuccess: function(){  //加载成功时执行
                $(".sendbtn").click(function () {
                    var a = list[$(this).data('listindex')].paymentDate;
                    var formData = {
                        paymentAmount:list[$(this).data('listindex')].paymentAmount,
                        paymentType:list[$(this).data('listindex')].paymentType,
                        paymentDate:$.myTime.UnixToDate(a),
                        description:list[$(this).data('listindex')].description,
                        isValid: true,
                        paymentStatus:18,
                        projectId: proid,
                        paymentId: list[$(this).data('listindex')].paymentId
                    }
                    $.ajax({
                        type: "POST",
                        url: ctx + "/project/updatePayment",
                        data:JSON.stringify(formData),
                        contentType: "application/json",
                        success: function(data){
                            if(data.code == 200){
                                $('#table2').bootstrapTable('refresh', {url: ctx + '/project/queryPayment'});
                            } else {
                                alert(data.msg)
                            }
                        }
                    })
                })
                $(".editbtn").click(function () {
                    $('#addBtn').hide()
                    $('#editplanBtn').show()
                    $("#payplan .modal-title").html('修改收款计划')
                    $('#payplan').modal({backdrop: 'static', keyboard: false});
                    $("#paymentAmount").val( list[$(this).data('listindex')].paymentAmount)
                    $("#paymentType").val(list[$(this).data('listindex')].paymentType)
                    var dataDate = list[$(this).data('listindex')].paymentDate
                    $("#paymentDate").val($.myTime.UnixToDate(dataDate))
                    $("#description").val(list[$(this).data('listindex')].description)
                    var dataPayid = list[$(this).data('listindex')].paymentId
                   //点击确定
                    $("#editplanBtn").click(function () {
                        if($("#planform").valid()){
                            var formData = {
                                paymentAmount:$("#paymentAmount").val(),
                                paymentType:$("#paymentType").val(),
                                paymentDate:$("#paymentDate").val(),
                                description:$("#description").val(),
                                isValid: true,
                                paymentStatus:17,
                                projectId:proid,
                                paymentId:dataPayid
                            }
                            $.ajax({
                                type: "POST",
                                url: ctx + "/project/updatePayment",
                                data:JSON.stringify(formData),
                                contentType: "application/json",
                                success: function(data){
                                    if(data.code == 200){
                                        $('#payplan').modal('hide')
                                        $('#table2').bootstrapTable('refresh', {url: ctx + '/project/queryPayment'});
                                    }
                                }
                            })
                        }
                    })
                })
                $(".delbtn").click(function () {
                    var payid ={
                        paymentId:$(this).data('payid')
                    }
                    $.ajax({
                        type: "POST",
                        url: ctx + "/project/deletePayment",
                        data:JSON.stringify(payid),
                        contentType: "application/json",
                        success: function(data){
                            if(data.code == 200){
                                $('#table2').bootstrapTable('refresh', {url: ctx + '/project/queryPayment'});
                            }
                        }
                    })
                })
                $(".colsebtn").click(function () {
                    $("#description1").val('')
                    $('#modalDes').modal({backdrop: 'static', keyboard: false});
                    formData = {
                        paymentAmount:list[$(this).data('listindex')].paymentAmount,
                        paymentType:list[$(this).data('listindex')].paymentType,
                        paymentDate:$.myTime.UnixToDate(list[$(this).data('listindex')].paymentDate),
                        description:list[$(this).data('listindex')].description,
                        isValid: true,
                        paymentStatus:20,
                        projectId: proid,
                        paymentId: list[$(this).data('listindex')].paymentId
                    }
                })
            },
            strictSearch: true,
            clickToSelect: true,    //是否启用点击选中行
            searchOnEnterKey: true,
            columns: [{
                field: 'paymentId',
                title: 'id',
                visible: false
            }, {
                field: 'paymentTypeName',
                title: '收款类型'
            },{
                field: 'paymentDate',
                title: '收款日期',
                formatter:function (value) {
                   return $.myTime.UnixToDate(value)
                }
            }, {
                field: 'paymentAmount',
                title: '收款金额'
            },{
                field: 'statusName',
                title: '状态'
            }, {
                field: 'projectType',
                title: '操作人'
            }, {
                field: 'createDate',
                title: '操作日期'
            },{
                field: 'description',
                title: '备注'
            },{
                title: '操作',
                formatter: function (value, row, index) {
                    if(row.paymentStatus == 17){
                        var a = '<a class="page-action sendbtn" href="#" role="button" data-listindex="'+index+'" data-payid="'+row.paymentId+'" title="发布">发布</a>&nbsp;&nbsp;'
                        var b = '<a class="page-action editbtn" href="#" role="button" data-listindex="'+index+'" data-payid="'+row.paymentId+'" title="编辑">编辑</a>&nbsp;&nbsp;'
                        var c = '<a class="page-action delbtn" href="#" role="button" data-payid="'+row.paymentId+'" title="删除">删除</a>'
                        return a+b+c;
                    } else if(row.paymentStatus ==18){
                        var a = '<a class="page-action colsebtn" href="#" role="button" data-listindex="'+index+'" data-payid="'+row.paymentId+'">关闭</a>&nbsp;&nbsp;'
                        return a
                    } else {
                        return ''
                    }
                }
            }]
        });
    }
    function queryParams(params){
        return {
            pageNumber : params.pageNumber,
            pageSize : params.pageSize,
            projectId: proid
        }
    }

</script>
</body>
</html>